<template>
  <div class="designer-wrap">
    <div class="header">
    <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
    >
      <el-menu-item index="1">流程配置</el-menu-item>
      <el-menu-item index="2">流程表单</el-menu-item>
      <el-menu-item index="3">流程设计</el-menu-item>
      <el-menu-item index="4">更多配置</el-menu-item>

    </el-menu>
    <div class="publish">
<!--      <el-button size="mini" @click="preview"><i class="el-icon-view"></i>预览</el-button>-->
      <el-button size="mini" type="primary" @click="publish">发布</el-button>
    </div>
    </div>
<!--    <div class="publish">-->
<!--      <el-button size="mini" type="primary" @click="publish"><i class="el-icon-s-promotion"></i>发布</el-button>-->
<!--    </div>-->

    <div v-if="activeIndex == 1">
      <BasicInfo :navable="navable" :readable="readable"></BasicInfo>
    </div>
    <div v-if="activeIndex == 3">
      <FlowNode :node="node" :navable="navable" :readable="readable"></FlowNode>
    </div>

    <el-dialog v-model="dialogTableVisible" title="Shipping address">
      {{nodeData}}
    </el-dialog>

  </div>
</template>
<script setup name="FlowDesign">
import testHook from '../mixins/flowhook';
import {getStartNode} from '../../utils/nodeUtil';

import BasicInfo from './BasicInfo/index.vue'
import FlowNode from './FlowNode/index.vue'
import {reactive, ref, createApp, defineEmits, defineProps, computed, onMounted, toRefs} from "vue";
import {useStore} from 'vuex';
/* 组件局部注册 */
const app = createApp({});
const store = useStore();

const activeIndex = ref('3')

const dialogTableVisible = ref(false)

//注册组件
// app.component({
//   FlowMap, FlowZoom, FlowNav, FlowHelper, FlowTips, FlowStartNode, FlowNode, FlowEndNode
// });


//接收父组件传过来的值

const props = defineProps({
  node: {
    type: Object,
    default: function () {
      return getStartNode();
    },
  },
  navable: {
    type: Boolean,
    default: true,
  },
  readable: {
    type: Boolean,
    default: false,
  },
});

const {node, navable, readable} = toRefs(props);
const emit = defineEmits(["publish"])
//定义一个数据
const zoomValue = ref(100);
//reactive 主要是用来处理复杂的数据类型，比如对象和数组。
//所以当你传递的是非对象时，页面不会发生响应
//错误示范
// let error = reactive(err)
//正确示范
// let right = reactive({
// 	name:"张三"
// })
// //修改值得时候
// right.name = "李四"

//  vue2 => computed
const zoomStyle = computed(() => {
  return zoomValue.value / 100
});

const nodeData = computed(() => {
  return store.state.process.node;
})

//mounted => onMounted
onMounted(() => {

  store.dispatch('process/setNode', node.value);
})

// getData() {
//         return this.nodeData;
//       },
const getData = () => {
  return nodeData.value;
}

const toReturn = () => {

}

const publish = () => {
  dialogTableVisible.value = true;
  console.log("提交数据开始", JSON.stringify(nodeData.value))
  emit('publish', nodeData.value);
}

const handleSelect = (key, keyPath) => {
  console.log(key, keyPath)
  activeIndex.value = key;
}
</script>

<style lang="less" scoped>

.header {
  min-width: 980px;
  position: relative;

  .el-menu {
    top: 0;
    z-index: 999;
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .publish {
    position: absolute;
    top: 15px;
    right: 20px;
    z-index: 1000;

    i {
      margin-right: 6px;
    }

    button {
      border-radius: 15px;
    }
  }
}
</style>


